<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <h1>{{ getLen }}</h1>
    <button @click="add">Add</button>
    <button @click="clickHandler">Click</button>
  </div>
</template>

<script setup>
//reactive 定义响应式数据
//shallowReactive 定义浅响应式数据
//ref 定义基本类型(简单对象)响应式处理,需要.value操作数据
//readonly 定义只读数据,非响应式数据
//shallowReadonly 定义只读浅只读数据(根属性只读)


// 2. ref

import {reactive, computed, ref, watchEffect} from "vue";
const data = reactive({
  name: "孙悟空",
  age: 500,
  friends: ["猪八戒", "沙和尚"]
});

function add() {
  data.age++
}

const count = ref(0)
const content = ref('测试内容');
function clickHandler(){
  count.value++
  content.value+='!'
}
const getLen = computed(() => {
  //console.log("计算属性执行了")
  return content.value.length
})
// watch(count,(newValue,oldValue) => {
//   console.log(newValue,oldValue)
// })

//watchEffect 副作用函数,如果函数内部用到了响应式数据,就会自动执行
watchEffect(() => {
  console.log("副作用函数执行了")
  console.log('count: '+count.value + ",age: "+data.age)
})
</script>

<style scoped>

</style>
